<template>
	<view style="margin-top: 20rpx;">
		<!-- <view class="fixed">
			<u-search placeholder="输入设备型号进行查询" v-model="page.machinerySpec" :showAction="false" @search="getMachinery"></u-search>
		</view>
		<view class="screen">
			<view class="state location" @click="open">
				<span>{{text}}</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="extent location">
				<span>设备类型</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="place location" @click="location">
				<span>所在位置</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
		</view> -->
		<view class="state-box" v-for="item in data" :key="item.machineryId">
			<view class="bottom" @click="details(item.machineryId)">
				<view class="headline">
					{{item.machineryName}}
				</view>
				<view class="information">
					设备型号：{{item.machinerySpec}}
				</view>
				<view class="information">
					所在车间：{{item.workshopName}}
				</view>
				<view>
					<view
						:class="{six:item.statusName == '待机',four:item.statusName == '维修中',one:item.statusName == '运行',two:item.statusName == '停机',three:item.statusName == '待维修',five:item.statusName == '禁用'} "
						id="state-show">
						{{item.statusName}}
					</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="report button-da" @click="tz(item.machineryId)">
					编辑
				</view>
				<view class="send-back button-xiao">
					删除
				</view>
			</view>
		</view>

		<!-- --------------------- -->
		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" @close="close">
			<template>
				<view class="popup-header">
					设备状态
				</view>
				<view class=""
					style="display: flex; justify-content: space-between;margin: 60rpx 32rpx 0 32rpx;flex-wrap: wrap;">
					<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
						<u-tag :text="item.statusName" :plain="!item.checked" type="warning" :name="index"
							@click="radioClick">
						</u-tag>
					</view>
				</view>

				<!-- 确定按钮 -->
				<view class="button" @click="selectState">
					确定
				</view>
			</template>
		</u-popup>
		<!-- ---------------------------- -->
		<!-- 所在位置 -->
		<u-popup :show="show1" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					所在车间
				</view>
				<view class="search">
					<u-search placeholder="位置名称"></u-search>
				</view>
				<view class="container">
					<u-radio-group v-model="checkboxValue1" placement="column" @change="checkboxChange" shape="circle"
						iconPlacement="right" activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button">
					确定
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {
		getMachinery,
		dictionaries
	} from '@/api/facilityInformation/book.js'
	import {
		getStatus
	} from '@/api/mes/mes.js'
	export default {
		data() {
			return {
				page: {
					machinerySpec: '',
					pageNum: 1,
					pageSize: 10,
				}, //页码数
				total: '', //设备台账总数
				// 设备数据
				data: [],
				// 位置得数据
				checkboxValue1: '',
				// 基本案列数据
				checkboxList1: [{
						name: '西区铸模车间A-001',
						disabled: false
					},
					{
						name: '西区铸模车间A-002',
						disabled: false
					},
					{
						name: '西区铸模车间A-003',
						disabled: false
					},
					{
						name: '西区铸模车间A-004',
						disabled: false
					},
					{
						name: '西区铸模车间A-005',
						disabled: false
					},
					{
						name: '西区铸模车间A-006',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					},
					{
						name: '西区铸模车间A-007',
						disabled: false
					}
				],
				show1: false, //所在位置弹出层
				show: false, //弹出层
				obj: {
					dictType: 'repair_status'
				},
				index: '',
				text: '设备状态',
				checkboxs: []
			}
		},
		created() {
			this.getMachinery()

		},
		methods: {
			// 获取台账信息
			getMachinery() {
				getMachinery(this.page).then(res => {
					this.total = res.total
					this.data = res.rows
				})
				// 设备状态
				getStatus().then(options=>{
					this.checkboxs = options.data
					this.checkboxs.forEach(item=>{
						item.checked = false
					})
				})
			},
			// 跳转编辑
			tz(id) {
				uni.navigateTo({
					url: `/pages/facilityInformation/compile/index?id=${id}`
				})
			},
			// 跳转去详情界面
			details(id) {
				uni.navigateTo({
					url: `/pages/facilityInformation/details/index?id=${id}`
				})
			},
			// 关闭弹出层
			close() {
				this.show = false
				this.show1 = false
			},
			// 打开弹出层
			open() {
				this.show = true
			},
			// 弹出层标签点击事件
			radioClick(name) {
				console.log(name);
				this.checkboxs.map((item, index) => {
					item.checked = index === name ? true : false
				})
				this.index = name

			},
			// 状态确定按钮
			selectState() {
				this.text = this.checkboxs[this.index].text
				this.close()
			},
			// 所在位置弹出层
			location() {
				this.show1 = true
			},
			// 多选按钮
			checkboxChange(n) {
				console.log('change', n);
			}
		},
		// 上拉加载
		onReachBottom() {
			//触发了上拉加载，请求下一页（10）条数据
			let allTotal = this.page.pageNum * this.page.pageSize
			if (allTotal < this.total) {
				// 判断当前条数小于总条数
				this.page.pageNum++
				this.getMachinery()
			} else {
				uni.showToast({
					title: '已加载全部数据!',
					icon: 'none'
				})
			}

		},

		// 下拉刷新
		onPullDownRefresh() {
			this.data = []
			// 调用获取数据的方法
			this.getMachinery()
			setTimeout(() => {
				// 结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .weizi {
		.u-popup__content {
			height: 1048rpx !important;
		}

		.u-radio {
			margin-bottom: 48rpx !important;
		}
	}

	::v-deep .u-popup__content {}

	.container {
		height: 660rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
	}

	// 多选框得边框颜色
	::v-deep .u-radio__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-radio-group--column {
		padding: 0 32rpx;
	}

	.search {
		padding: 0 32rpx 12rpx 32rpx;
		box-shadow: 0px 2rpx 4rpx rgba(32, 37, 64, 0.06);
		margin-bottom: 48rpx;
	}

	.button {
		margin: 50rpx auto;
		width: 490rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		font-size: 32Rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 64rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.popup-header {
		margin: 0 32rpx 24rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	// -------------------------------
	// 弹出层样式
	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}

	// --------------------------------------------
	.fixed {
		width: 100%;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(32, 37, 64, 0.06);
		padding: 12rpx 32rpx;
		position: fixed !important;
		z-index: 100;
	}

	.screen {
		padding-top: 140rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-around;

		.location {
			display: flex;
			justify-content: space-between;
			width: 147rpx;
		}

		.u-icon {
			margin-left: 10rpx;
			padding-top: 4rpx;
		}

	}

	.state-box {
		margin: 0 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;

		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.bottom {
			margin-bottom: 32rpx;

			view {
				margin-bottom: 32rpx;
			}
		}

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}

		.headline {
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

		}

		#state-show {
			width: 130rpx;
			height: 44rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 44rpx;
		}

		.one {
			background-color: #7EE715;
			color: #fff;
		}

		.two {
			background-color: #F20909;
			color: #fff;
		}

		.three {
			background-color: #A2E816;
			color: #fff;
		}

		.six {
			background-color: #edfcf3;
			color: #55ec91;
		}

		.five {
			background-color: #dcdee2;
			color: #fff;
		}

		.four {
			background-color: #F2AE5A;
			color: #ffc300;
		}

		.button-da {
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			margin-bottom: 0 !important;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			vertical-align: top;
		}

		.verification {
			width: 622rpx;

		}

		.report {
			width: 395rpx;
		}

		.button-xiao {
			width: 202rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.send-back {
			width: 202rpx;
			border: 1px solid rgba(255, 87, 51, 1);
			color: rgba(255, 87, 51, 1);
		}

		.dispatch {
			width: 202rpx;
			border: 1px solid #38bdff;
			color: rgba(32, 37, 64, 1);
		}
	}









	// 俩个按钮对齐样式
	.two-button {
		margin: 48rpx 32rpx 0 32rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 300rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: #202540;
		}

		.button-right {
			background: linear-gradient(90deg, #38DEFF 0%, #38AFFF 100%);
			color: #FFFFFF;
		}
	}




	// 文本域样式
	::v-deep .u-textarea--radius {
		border-radius: 10px !important;
		background: #fbfbfb !important;
	}

	::v-deep .u-popup__content {
		width: 686rpx;
		height: 592rpx;
		opacity: 1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);

	}
</style>